<template>
  <div class="container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="dialogVisible = true"
        >
          排产
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>

    <el-radio-group v-model="tabPosition" :disabled="!status">
      <el-radio-button label="top">资源甘特图</el-radio-button>
      <el-radio-button label="right">资源负荷图</el-radio-button>
    </el-radio-group>
    <div v-if="tabPosition == 'top'">
      <GanttIndex :status="status"></GanttIndex>
    </div>
    <div v-else-if="tabPosition == 'right'">
      <!-- <GanttIndex1 :status="status"></GanttIndex1> -->
      <vab-chart
        class="rank-echart"
        :init-options="initOptions"
        :option="option"
        theme="vab-echarts-theme"
      />
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="订单排产"
      :visible="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column label="编号">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column> -->
        <el-table-column
          prop="ProduceOrderId"
          label="订单编号"
        ></el-table-column>
        <el-table-column prop="Customer" label="客户名称"></el-table-column>
        <el-table-column prop="OrderTime" label="下单日期"></el-table-column>
        <el-table-column prop="PayTime" label="交付日期"></el-table-column>
        <el-table-column prop="Priority" label="订单优先级"></el-table-column>
        <!-- <el-table-column prop="name" label="产品信息"></el-table-column> -->
        <el-table-column prop="Creator" label="负责人"></el-table-column>
        <el-table-column prop="CreateTime" label="创建日期"></el-table-column>
      </el-table>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="排产规则">
          <el-checkbox-group v-model="form.Rule">
            <el-checkbox label="完成时间" name="1"></el-checkbox>
            <el-checkbox label="负载均衡" name="2"></el-checkbox>
            <el-checkbox label="优先级高订单优先" name="3"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import VabChart from '@/extra/VabChart'
  import GanttIndex from './components/pages/gantt-index.vue'
  import GanttIndex1 from './components/pages/gantt-index1.vue'
  import {
    Scheduling,
    SchedulingRule,
    PartInfo,
    DeviceRunningRate,
  } from '@/api/production'

  export default {
    components: {
      GanttIndex,
      GanttIndex1,
      VabChart,
    },
    data() {
      return {
        initOptions: {
          renderer: 'svg',
        },
        option: {
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          grid: {
            top: '0%',
            left: '2%',
            right: '20%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              splitLine: {
                show: false,
              },
              type: 'value',
              show: false,
            },
          ],
          yAxis: [
            {
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              type: 'category',
              axisTick: {
                show: false,
              },
              data: [],
            },
          ],
          series: [
            {
              name: '百分比',
              type: 'bar',
              barWidth: 15,
              label: {
                show: true,
                position: 'right',
                color: '#1890FF',
                fontSize: 12,
                formatter: ({ data }) => {
                  return `${data}%`
                },
              },
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              },
              data: [],
            },
          ],
        },
        form: {
          Rule: [],
          OrderIds: [],
        },
        dialogVisible: false,
        tabPosition: '',
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '1518 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '1111518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上2222222',
          },
        ],
        multipleSelection: [],

        status: false,
        MachineDeviceGroupRunnningRateInfo: [],
      }
    },
    created() {
      const params = {
        Index: 1,
        Count: 100,
      }
      Scheduling(params).then((res) => {
        console.log('Scheduling', res)
        this.tableData = res.OrderList
      })

      DeviceRunningRate().then((res) => {
        console.log('DeviceRunningRate', res)
        this.MachineDeviceGroupRunnningRateInfo =
          res.MachineDeviceGroupRunnningRateInfo
        this.MachineDeviceGroupRunnningRateInfo.map((v) => {
          console.log('DeviceId', v)
          this.option.yAxis[0].data.push(v.DeviceId)
          this.option.series[0].data.push(v.DeviceDayRunningInfoRate * 100)
          // this.option.series[0].data.push(10)
        })
      })
    },
    methods: {
      input() {
        if (this.status == false) {
          this.tabPosition = ''
        }
      },
      submit() {
        console.log(this.multipleSelection)
        this.form.OrderIds = this.multipleSelection.map((v) => {
          return v.ProduceOrderId
        })

        SchedulingRule({
          OrderIds: this.form.OrderIds,
          Rule: this.form.Rule.toString(),
        }).then((res) => {
          console.log('SchedulingRule', res)
          if (res.Message == 'Success') {
            this.status = true
          } else {
            this.status = false
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
          this.dialogVisible = false
        })
      },
      handleClose(done) {
        this.dialogVisible = false
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 30px;

    :deep() {
      .echarts {
        width: 100%;
        height: 600px;
      }
    }
  }

  /*统一滚动条*/
  ::-webkit-scrollbar {
    width: 6px; /* 纵向滚动条*/
    height: 6px; /* 横向滚动条 */
  }

  /*定义滑块 内阴影*/
  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
</style>
